<template>
  <div class="heihei">
    <!-- 顶部 -->
    <div class="top">
      <span class="fu" @click="fun($event)">&lt;</span>
      <span class="i">安全中心</span>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <img src="@/assets/ayuan/images/c01_02.gif" alt="" />
    <div class="one">
      <img src="@/assets/ayuan/images/c01_05.gif" alt="" />
      <span
        >您还没有卡号，点击<button @click="get($event)">申请卡号</button>
      </span>
    </div>
    <div>
      <TiaoZi></TiaoZi>
    </div>
  </div>
</template>

<script>
import TiaoZi from "../../components/ayuan/TiaoZi.vue";
export default {
  components: { TiaoZi },
  methods: {
    fun() {
      this.$router.go(-1);
    },
    get() {
      this.$router.push("/auton");
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  background-color: #122897;
  color: white;
  display: flex;
  height: 0.6rem;
  .i {
    display: block;
    margin-left: 1.04rem;
    line-height: 0.6rem;
    font-size: 0.2rem;
  }
  .fu {
    font-size: 0.36rem;
    margin-left: 0.16rem;
    line-height: .6rem;
  }
  ul {
    position: absolute;
    right: 0.1rem;
    top: 0.26rem;
  }
  li {
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 50%;
    float: left;
    background-color: white;
    margin-right: 0.06rem;
    list-style: none;
  }
}
.one {
  width: 338px;
  height: 70px;
  margin-left: 16px;
  display: flex;
  span {
    display: block;
    line-height: 70px;
  }
  button{
    color: #122897c1;
    font-size: .18rem;
    background-color: white;
    margin-left: .1rem;
  }
}
</style>